import React, { Component } from 'react';
import { createForm } from 'rc-form';
import Head from 'views/component/head/head';
import { Picker, List, InputItem, DatePicker, Toast } from 'antd-mobile';
import SelectTitle from 'views/component/selectTitle/selectTitle';
import { SubViewLink } from 'views/component/subViewLink/subViewLink';
import Monitoring from 'views/monitoring/monitoring';
import moment from 'moment';
import { i18n } from 'js/core/i18n';
import api from 'js/api/index';
import './addHandleList.scss';

const nowTimeStamp = Date.now();
const now = new Date(nowTimeStamp);
class AddHandleList extends Component {
  constructor() {
    super();
    this.state = {
      start: moment().add(-100, 'days').format('YYYY-MM-DD'),
      end: moment().format('YYYY-MM-DD'),
      dataType: null,
      week: []
    };
  }
  dataTypeOnChange = (dataType) => {
    this.setState({ dataType: dataType })
  }
  submit = () => {
    let data = this.props.form.getFieldsValue();
    if (!data.CheckPlanName || !this.state.dataType || this.state.week.length === 0) {
      Toast.fail(i18n.get('请输入完整的信息'), 2)
      return
    }
    data.DataTypeID = this.state.dataType.DataTypeID;
    data.EndDate = this.state.end;
    data.CaptureWeek = this.state.week.join(',');
    data.StartDate = this.state.start;
    api('/Monitoring/CheckPlanAddEdit', data, 'POST').then((data) => {
      if (data.code === -1) {
        Toast.fail(data.message, 2)
      } else {
        Toast.success(i18n.get('添加成功'));
        if (this.props.complete) {
          this.props.complete();
          FW.emit('back');
        }
      }
    })
  }
  weekTimeIsSelect = (index) => {
    let week = this.state.week;
    let i = week.findIndex(item => item === index);
    if (i !== -1) {
      return ' select';
    } else {
      return '';
    }
  }
  weekTimeSelect = (index) => {
    let week = this.state.week;
    let i = week.findIndex(item => item === index);
    if (i === -1) {
      week.push(index);
    } else {
      week.splice(i, 1);
    }
    this.setState({})
  }
  complete = () => {
    this.query.pageindex = 1;
    this.setState({ data: [], hasMore: true })
  }

  render() {
    const { getFieldProps } = this.props.form;
    let { dataType, start, end } = this.state;
    return (
      <div >
        <div className="add-content device-container">
          <List>
            <div className="deviceItem device-border flex-vcenter">
              <SelectTitle classStyle="required">{i18n.get('实体名称')}</SelectTitle>
              <SubViewLink moduleName="selectDataTypeId" className="flex-g-1 text-right deviceItemContent" title={i18n.get('选择实体')} modelData={{ onChange: this.dataTypeOnChange }}>
                {dataType ? dataType.Name : <div style={{ color: '#909090' }}>{i18n.get('选择实体')}</div>}
              </SubViewLink>
            </div>
            <InputItem
              {...getFieldProps('CheckPlanName') }
              clear
              placeholder={i18n.get("计划名称")}
              className="device-border"
            ><SelectTitle classStyle="required">{i18n.get('计划名称')}</SelectTitle></InputItem>
            <div className="deviceItem device-border flex-vcenter">
              <SelectTitle classStyle="required">{i18n.get('有效时间')}</SelectTitle>
              <div className="flex-g-1 text-right deviceItemContent">
                {start}-{end}
              </div>
            </div>
            <DatePicker extra={i18n.get("请选择")} locale={ {DatePickerLocale:{year:i18n.get("年"), month:i18n.get("月"), day:i18n.get("日"), hour:i18n.get("时"), minute:i18n.get("分")}}} okText={i18n.get("确定")} dismissText={i18n.get("取消")}
              mode="time"
              {...getFieldProps('PlanCaptureTimeOne') }>
              <List.Item arrow="horizontal">
                <SelectTitle >{i18n.get('抓拍时间')}</SelectTitle>
              </List.Item>
            </DatePicker>
            {/* <DatePicker extra={i18n.get("请选择")} locale={ {DatePickerLocale:{year:i18n.get("年"), month:i18n.get("月"), day:i18n.get("日"), hour:i18n.get("时"), minute:i18n.get("分")}}} okText={i18n.get("确定")} dismissText={i18n.get("取消")}
              mode="time"
              {...getFieldProps('PlanCaptureTimeTwo') }>
              <List.Item arrow="horizontal">
                <SelectTitle >{i18n.get('抓拍时间2')}</SelectTitle>
              </List.Item>
            </DatePicker>
            <DatePicker extra={i18n.get("请选择")} locale={ {DatePickerLocale:{year:i18n.get("年"), month:i18n.get("月"), day:i18n.get("日"), hour:i18n.get("时"), minute:i18n.get("分")}}} okText={i18n.get("确定")} dismissText={i18n.get("取消")}
              mode="time"
              {...getFieldProps('PlanCaptureTimeThree') }>
              <List.Item arrow="horizontal">
                <SelectTitle >{i18n.get('抓拍时间3')}</SelectTitle>
              </List.Item>
            </DatePicker> */}
            <div className="add-data">
              <div className="add-group">{i18n.get('执行时间')}</div>
              <div className="add-radio flex wrap pt10">
                <div className={"frame" + this.weekTimeIsSelect(1)} onClick={() => { this.weekTimeSelect(1) }}>{i18n.get('星期一')}</div>
                <div className={"frame" + this.weekTimeIsSelect(2)} onClick={() => { this.weekTimeSelect(2) }}>{i18n.get('星期二')}</div>
                <div className={"frame" + this.weekTimeIsSelect(3)} onClick={() => { this.weekTimeSelect(3) }}>{i18n.get('星期三')}</div>
                <div className={"frame" + this.weekTimeIsSelect(4)} onClick={() => { this.weekTimeSelect(4) }}>{i18n.get('星期四')}</div>
                <div className={"frame" + this.weekTimeIsSelect(5)} onClick={() => { this.weekTimeSelect(5) }}>{i18n.get('星期五')}</div>
                <div className={"frame" + this.weekTimeIsSelect(6)} onClick={() => { this.weekTimeSelect(6) }}>{i18n.get('星期六')}</div>
                <div className={"frame" + this.weekTimeIsSelect(7)} onClick={() => { this.weekTimeSelect(7) }}>{i18n.get('星期日')}</div>
              </div>
            </div>
            <InputItem
              {...getFieldProps('Remark') }
              clear
              placeholder={i18n.get("请填写备注")}
              className="device-border"
            ><SelectTitle >{i18n.get('备注')}</SelectTitle></InputItem>
          </List>
        </div>
        <div className="add-info mb"><b>*</b>{i18n.get('必填项')}</div>

        <div className="device-btn">
          <button type="button" className="btn btn-primary" onClick={this.submit}>{i18n.get('确认新增')}</button>
        </div>
      </div>
    );
  }
}

let AddHandleListForm = createForm()(AddHandleList);

class Main extends Component {
  constructor() {
    super()
    this.state = {
      type: 1
    }
  }
  render() {
    let { type } = this.state;
    return <div id="addHandleList" className="flex-col">
      {/* <div className="pb20">
        <div className="flex jc-around text-center headTag ">
          <div className={"flex-col-4 item" + (type === 1 ? ' select' : '')} onClick={() => { this.setState({ type: 1 }) }}>{i18n.get('自动抓拍')}</div>
          <div className={"flex-col-4 item" + (type === 2 ? ' select' : '')} onClick={() => { this.setState({ type: 2 }) }}>{i18n.get('手动抓拍')}</div>
        </div>
      </div> */}
      <div className="flex-g-1 scroll-absolute">
        {/* {type === 1 ? <AddHandleListForm complete={this.props.modelData.complete} /> : <Monitoring complete={this.props.modelData.complete} />} */}
        <AddHandleListForm complete={this.props.modelData.complete} />
      </div>
    </div>
  }
}

export default Main;
